<template>
  <div>
    <template>


      <el-input
          placeholder="请输入名称"
          v-model="goodsName"
          clearable>
      </el-input>

      <el-input
          placeholder="请输入作者名称"
          v-model="author"
          clearable>
      </el-input>

<!--      <el-input-->
<!--          placeholder="请选择分类"-->
<!--          v-model="categoryid"-->
<!--          clearable>-->
<!--      </el-input>-->

      <el-select v-model="value" placeholder="请选择" @change="categorySelect">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>

      <el-button type="primary" icon="el-icon-search" @click="fetchData()">搜索</el-button>

      <el-button type="success" plain @click="handleAdd()">新增</el-button>


      <el-table
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName">
        <el-table-column
            prop="id"
            label="id"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="name"
            width="180">
        </el-table-column>

        <el-table-column
            prop="goodsno"
            label="Goods No"
            width="180">
        </el-table-column>

        <el-table-column
            prop="author"
            label="Author"
            width="180">
        </el-table-column>

        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small" @click="updateClick(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="deleteClick(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>


      <!--    新增-->
      <el-dialog
          title="商品详情"
          :visible="addDialogVisible"
          @close="addDialogVisible = false"
      >
        <el-form
            :model="addFromJson"
            label-width="100px">

          <el-form-item label="商品名称">
<!--            <el-input v-model="addFromJson.name"/>-->


            <!--     fetch-suggestions 绑定输入时的搜索方法     -->
            <el-autocomplete
                v-model="addFromJson.name"
                :fetch-suggestions="querySearch"
                placeholder="请输入商品名称"
                @select="handleSelect"
                :style="{width: '100%'}">
            </el-autocomplete>
          </el-form-item>


          <el-form-item label="商品编号">
            <el-input v-model="addFromJson.goodsno"/>
          </el-form-item>
          <el-form-item label="作者">
            <el-input v-model="addFromJson.author"/>
          </el-form-item>

          <el-form-item label="出版社">
            <el-input v-model="addFromJson.publisher"/>
          </el-form-item>

          <el-form-item label="详情">
            <el-input v-model="addFromJson.description"/>
          </el-form-item>

          <el-form-item label="类别">
            <el-select v-model="addFromJson.categoryid" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>


          <!-- 其他表单项依此类推 -->
          <el-form-item>
            <el-button type="primary" @click="addGoods">新增保存</el-button>
          </el-form-item>

        </el-form>

      </el-dialog>

      <!--    修改-->
      <el-dialog
          title="修改"
          :visible="updateDialogVisible"
          @close="updateDialogVisible = false"
      >
        <el-form
            :model="updateFromJson"
            label-width="100px">
          <el-form-item label="商品名称">
            <el-input v-model="updateFromJson.name"/>
          </el-form-item>
          <el-form-item label="商品编号">
            <el-input v-model="updateFromJson.goodsno"/>
          </el-form-item>
          <el-form-item label="作者">
            <el-input v-model="updateFromJson.author"/>
          </el-form-item>

          <el-form-item label="出版社">
            <el-input v-model="updateFromJson.publisher"/>
          </el-form-item>

          <el-form-item label="详情">
            <el-input v-model="updateFromJson.description"/>
          </el-form-item>

          <el-form-item label="类别">
            <el-select v-model="updateFromJson.categoryid" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <!-- 其他表单项依此类推 -->
          <el-form-item>
            <el-button type="primary" @click="updateGoods()">更新保存</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

    </template>
  </div>
</template>


<script>
import request from "@/utils/request";
export default {
  methods: {

    querySearch(queryString, cb) {
      if (queryString === '') {
        return
      }
      const querySearchData ={
        goodsName:this.addFromJson.name
      }
      request.get("/goods/retrievalGoodsName",{
        params:querySearchData
      }).then(res=>{
        console.log(res)
        //需要的格式如下
        let apiResult = [
          {
            value: "老王",
          },
          {
            value: "王老吉",
          },
        ];
        //格式一样后，直接丢到这个里面去就可以了
        cb( res.data);
      })
    },
    //新增时名称选择触发
    handleSelect(item) {
      console.log('Selected: ', item);
    },
    //分类选择
    categorySelect(id){
      console.log("当前id:"+id)
      this.categoryid=id
    },
    //查询分类
    selectCategory(){
      request.get("category/findAllCategory")
      .then(res=>{
        console.log(res)
        this.options = res.data
      })
    },
    //根据id 删除商品
    deleteClick(id){
      const deleteDate={
        id:id
      }

      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        request.delete('/goods/deleteGoods',{
          params:deleteDate
        }).then(res=>{
          console.log(res)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //重新查询数据
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });


    },
    //更新商品信息
    updateGoods(){
      console.log(this.updateFromJson)
      request.post('/goods/updateGoods',this.updateFromJson).then(res=>{
        console.log(res)
        this.$message.success(res.msg);

        //关闭弹窗
        this.updateDialogVisible=false

        //重新查询数据
        this.fetchData()
      })
    },

    //修改
    updateClick(row){
      this.updateDialogVisible=true
      console.log(row)
      this.updateFromJson=row
    //  row.id 拿id去后端查询单条 赋值给 this.updateFromJson
    },
    //新增商品信息
    addGoods(){
      console.log(this.addFromJson)

      request.post('/goods/addGoods',this.addFromJson).then(res=>{
        console.log(res)
        this.$message.success(res.msg);

        //关闭弹窗
        this.addDialogVisible=false

        //重新查询数据
        this.fetchData()
      })
    },
    //新增商品
    handleAdd() {
      this.addDialogVisible = true;
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    handleClick(row) {
      console.log(row);
    },
    fetchData(){
      const fetchData={
        name: this.goodsName,
        author:this.author,
        pageNum:this.pageNum,
        pageSize:this.pageSize,
        categoryid:this.categoryid
      }
      console.log("查询条件：{}",fetchData)
      request.get('/goods/findGoods',{
        params:fetchData
      }).then(res=>{
        console.log(res)
        this.tableData = res.data.list
        this.total = res.data.totalCount
        //当前页赋值
        // this.pageNum = res.data.pageNum
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val
      this.fetchData()
    }
  },
  created() {
    this.fetchData()
    this.selectCategory()
  },
  data() {
    return {
      tableData: [],
      goodsName:'',
      author:'',
      categoryid:'',
      pageNum:1,
      pageSize:5,
      addDialogVisible:false,//新增的弹框
      updateDialogVisible:false,//修改的弹框
      addFromJson:{},
      total:0,
      updateFromJson:{},//更新商品的对象
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    }
  }
}
</script>
